<template>
  <a-card title="积分排行榜" :bordered="false">
    <div class="flex flex-col gap-2">
      <div :class="getStyle(index)" v-for="(member, index) in rankMembers">
        <img :class="rankIconStyle" :src="getIcon(index)" />
        <div class="flex-x-between items-center flex-1 ml-8">
          <img :class="rankAvatarStyle" :src="avatar" />
          <div class="flex flex-col gap-1">
            <div class="font-bold text-lg" :style="{ color: getColor(index) }">
              {{ member[MPM.Name] }}
            </div>
            <div class="text-base text-tc-3">{{ member[MPM.No] }}</div>
          </div>
          <div class="font-bold text-lg">{{ member[MPM.TotalPoint] }}</div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import avatar from "@/assets/avatar.png";
import top1 from "@/assets/icons/top1.svg";
import top2 from "@/assets/icons/top2.svg";
import top3 from "@/assets/icons/top3.svg";
import top4 from "@/assets/icons/top4.svg";
import top5 from "@/assets/icons/top5.svg";
import { MemberPropertyMap as MPM } from "@/map/member/property-map";

const rankRecordStyle = `flex-y-center py-3 px-4 rounded-lg 
bg-gradient-to-r to-transparent relative overflow-hidden`;
const rankIconStyle = "absolute top-0 left-0 w-12";
const rankAvatarStyle = "w-14 rounded-full";

const rankStyle = [
  ["#ffe0b1", "#ffab2f", top1],
  ["#cae2f7", "#479cea", top2],
  ["#fbccd2", "#e96374", top3],
];

const rankMembers = [
  {
    [MPM.Name]: "陈军",
    [MPM.No]: "2022070030121",
    [MPM.TotalPoint]: 642,
    [MPM.Avatar]: "",
  },
  {
    [MPM.Name]: "熊明",
    [MPM.No]: "2022070030416",
    [MPM.TotalPoint]: 630,
    [MPM.Avatar]: "",
  },
  {
    [MPM.Name]: "薛超",
    [MPM.No]: "2023070030111",
    [MPM.TotalPoint]: 595,
    [MPM.Avatar]: "",
  },
  {
    [MPM.Name]: "罗芳洋",
    [MPM.No]: "2022070030531",
    [MPM.TotalPoint]: 580,
    [MPM.Avatar]: "",
  },
  {
    [MPM.Name]: "郑叶明",
    [MPM.No]: "2023070030619",
    [MPM.TotalPoint]: 550,
    [MPM.Avatar]: "",
  },
];

const getStyle = (index: number) => {
  if (index < 3) return [rankRecordStyle, `from-[${rankStyle[index][0]}]`];
  else return rankRecordStyle;
};
const getIcon = (index: number) => {
  const icons = [top1, top2, top3, top4, top5];
  return icons[index];
};
const getColor = (index: number) => {
  if (index < 3) return rankStyle[index][1];
};
</script>

<style scoped></style>
